<!-- 租金明细 -->
<template>
  <div class="">
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="select(activeName)"
      :visible.sync="stateChange"
    >
      <el-tab-pane
        v-for="(item,index) in panelLabel"
        :key="index"
        :label="item.label"
        :name="item.name"
      >
        <el-table
          :data.sync="tableData"
          element-loading-text="稍等, 正加载中..."
          border=""
          fit
          highlight-current-row
          ref="multipletable"
          v-loading="listLoading"
          @selection-change="handleChange"
          type="expand"
        >
          <el-table-column align="center" type="selection" width="45"></el-table-column>
          <el-table-column align="center" prop="HireDate" label="所属日期" width="180"></el-table-column>
          <el-table-column align="center" prop="Hire" label="租金" width="180">
            <template slot-scope="scope">
              <template v-if="scope.row.Hire">
                <p style="color:green">{{ scope.row.Hire }} 元</p>
              </template>
              <span v-else style="color:green">{{ scope.row.Hire }} 元</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="State" label="状态">
            <template slot-scope="scope">
              <template v-if="scope.row.State==1">
                <p style="color:green">已交</p>
              </template>
              <span v-else style="color:red">未交</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="TaxesWay" label="交租方式">
            <template slot-scope="scope">
              <template v-if="scope.row.TaxesWay">
                <p>{{ scope.row.TaxesWay }}</p>
              </template>
              <span v-else>
                <p style="color:red">未知</p>
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="instructions" label="说明">
            <template slot-scope="scope">
              <template v-if="scope.row.instructions">
                <p style="color:green">{{ scope.row.instructions }}</p>
              </template>
              <span v-else>
                <p style="color:red">未知</p>
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="Operator" label="操作员">
            <template slot-scope="scope">
              <template v-if="scope.row.Operator">
                <p style="color:green">{{scope.row.Operator}}</p>
              </template>
              <span v-else>
                <p style="color:red">暂无</p>
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="repayDate" label="操作日期"></el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 分页 -->
      <div style="float: right; ">
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="listQuery.offset"
          :limit.sync="listQuery.limit"
          @pagination="getHireListInfo"
        />
      </div>
    </el-tabs>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  getHireList,
  getHirePay,
  getChartInfoRoom,
  insertHirePay
} from "@/api/rent";
import Pagination from "@/components/Pagination";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    ChartGuid: {
      type: Array,
      default: []
    }
  },
  data() {
    //这里存放数据
    return {
      activeName: "first",
      stateChange: false,
      panelLabel: [
        { label: "未收详情明细", name: "first" },
        { label: "已收租金明细", name: "second" },
        { label: "租金缴纳明细", name: "third" },
        { label: "保证金缴纳明细", name: "fourth" }
      ],
      tableData: [],
      total: 0,
      listQuery: {
        offset: 0,
        limit: 10,
        ChartGuid: this.ChartGuid
      }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    fetchData() {},
    select(type) {
      //租金详情
      switch (type) {
        case "first":
          this.isHirePay = true;
          this.activeName = "first";
          this.listQuery.state = 0;
          this.getHireListInfo();
          break;
        case "second":
          this.isHirePay = false;
          this.activeName = "second";
          this.listQuery.state = 1;
          this.getHireListInfo();
          break;
        // case "fourth":
        //   break;

        default:
          console.log("default");
          break;
      }
    },

    // 根据 autoGetChartInfo 方法返回的 ChartGUID 调用 getHireList 接口查询 HireList 表
    getHireListInfo() {
      getHireList(this.listQuery).then(response => {
        if (response != null) {
          this.tableData = response.body.rows;
          this.total = response.body.total;
          this.listLoading = false;
        } else {
          this.listLoading = false;
        }
      });
    },

    // 收取单个或多个租金
    singleSubmitHireGuid() {
      insertHirePay(this.selectionHireGUID).then(response => {
        if (response.code === 100) {
          this.getHireListInfo();
        } else {
          alert("收租失败");
        }
      });
    },

    // 获取选中租金, 一行的信息并将hireGUID Send 给 Server
    handleChange(val) {
      let HireGUID = [];
      if (val.length > 0) {
        this.selectionData = val;
        for (let index = 0; index < this.selectionData.length; index++) {
          HireGUID.push(this.selectionData[index].HireGUID);
        }
        this.selectionHireGUID = HireGUID;
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.fetchData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>